import {Component, OnInit} from '@angular/core';
import {FormControl} from '@angular/forms';
import {ActivatedRoute, Router, Params} from '@angular/router';
import {Observable} from 'rxjs/Observable';
import {Subject} from 'rxjs/Subject';
import {PostlistService} from './services/postlist.service';

@Component({
  selector: 'app-postlist',
  templateUrl: './postlist.component.html',
  styleUrls: ['./postlist.component.scss']
})
export class PostlistComponent implements OnInit {
  public itemsPerPage: number = 10;
  public totalRecords: number; //总页数
  public totalRows;//总条数
  public currentPage: number = 1;
  public offset: number = 0;
  public end: number = 0;
  public allData;//完整数据
  public data = []
  public searchText: string;
  public searchTextStream: Subject<string> = new Subject<string>();
  constructor(
    public router: Router,
    public activeRoute: ActivatedRoute,
    public postService: PostlistService) {

    // console.log("------这里开始对比Promise和Observable，这块代码是为了学习Observable使用的------");

    // //以下是Promise的写法
    // let promise = new Promise(resolve => {
    //     setTimeout(() => {
    //         resolve('---promise timeout---');
    //     }, 2000);
    // });
    // promise.then(value => console.log(value));

    // //以下是Observable的写法
    // let stream1$ = new Observable(observer => {
    //     let timeout = setTimeout(() => {
    //         observer.next('observable timeout');
    //     }, 2000);

    //     return () => {
    //         clearTimeout(timeout);
    //     }
    // });
    // let disposable = stream1$.subscribe(value => console.log(value));

    // //【第一个核心不同点来了】：Observable是可以中途取消的，而Promise一旦触发就不能取消了
    // setTimeout(() => {
    //     disposable.unsubscribe();
    // }, 1000);

    // //【第二个核心不同点来了】：Observable可以持续发射很多值，而Promise只能发射一个值就结束了
    // let stream2$ = new Observable<number>(observer => {
    //     let count = 0;
    //     let interval = setInterval(() => {
    //         observer.next(count++);
    //     }, 1000);

    //     return () => {
    //         clearInterval(interval);
    //     }
    // });
    // stream2$.subscribe(value => console.log("Observable>"+value));

    // //【第三个核心不同点来了】：Observable提供了很多的工具函数，最最最常用的filter和map演示如下
    // stream2$
    // 	.filter(val=>val%2==0)
    // 	.subscribe(value => console.log("filter>"+value));

    // stream2$
    // 	.map(value => value * value)
    // 	.subscribe(value => console.log("map>"+value));

    // console.log("------------------------------------------------");
  }

  ngOnInit() {
    //从路由里面获取URL参数
    this.activeRoute.params.subscribe(params => {
      console.log(params);
      this.currentPage = params.page;
      this.loadData(this.searchText);
    });

    this.searchTextStream
      .debounceTime(500)
      .distinctUntilChanged()
      .subscribe(searchText => {
        console.log(this.searchText);
        this.loadData(this.searchText)
      });
  }

  public loadData(searchText: string) {
    this.offset = (this.currentPage - 1) * this.itemsPerPage;
    this.end = (this.currentPage) * this.itemsPerPage;
    return this.postService.getPostList(searchText, this.currentPage).subscribe(
      res => {
        this.tableData = res['items'].slice(this.offset, this.end > this.totalRecords ? this.totalRecords : this.end);//数据切分
        this.allData=res['items']
        this.totalRecords = res['total'];
        this.totalRows = this.totalRecords
      },
      error => {
        console.log(error)
      },
      () => {//数据加载完毕的回调函数
      }
    );
  }


  public pageChanged1(event: any): void {
    let temp = parseInt(event.page) + 1;
    // this.router.navigateByUrl('posts/page/' + temp);
    console.log('---->', event)
    this.router.navigateByUrl('posts/page/' + event);

  }

  public searchChanged($event): void {
    this.searchTextStream.next(this.searchText);
  }

  public gotoWrite(): void {
    //TODO：如果没有登录，跳转到登录页，如果已登录，跳往写作页
    this.router.navigateByUrl('user/write');
  }


  tableData: any[] = this.data // 列表数据源


  handle(ref: any): void {
    console.log(ref.index)
    this.router.navigateByUrl('post/postdetail/' + ref.index);
    // console.log(ref.rowData)
    // console.log(ref.innerHTML)
    // ref.destroy()
  }

  mostWatch() { //--------------------------------------------------------------------------------------------------------->最多人看前端排序
    let data = this.allData;
    var len = data.length;
    for (var i = 0; i < len; i++) {
      for (var j = 0; j < len - 1 - i; j++) {
        if (data[j].num < data[j + 1].num) { //相邻元素两两对比
          var temp = data[j + 1]; //元素交换
          data[j + 1] = data[j];
          data[j] = temp;
        }
      }
    }
    console.log("排序后结果为:",data)
    this.tableData=data.slice(this.offset, this.end > this.totalRecords ? this.totalRecords : this.end);//数据切分
  }
}
